<template>
	<form>
		<div class="body">
			<div class="title">
				<div class="tit-font">智能报工工作台</div>
				<!-- <div style="height: 20rpx;">
					<img src="../../static/icon/out.png" class="tit-img">
				</div> -->
			</div>
			<div class="top">
				<div class="top-left">
					<div class="toplmsg">
						<div class="xiangxi">
							<div class="infomsg">{{realname}}</div>
							<div class="infomsg">{{username}}</div>
							<!-- <div class="infomsg">针一组</div> -->
						</div>
						<!-- <div class="secinfo">
							<div class="secmsg">
								<text>当前工序：车后跟补强带饰线</text>
							</div>
						</div> -->
					</div>
					<div class="matnr">
						<div v-for="(row,index) in aList" :key="index" style="margin: 5% 5%">
							<div :class="{matinfo:true,'bg-click':leftIndex==index}"  @click="changeAufnr(row);leftIndex=index">
								<div class="fmatf">
									<text>{{row.aufnr}}</text>
								</div>
								<div class="secmatf">
									<text style="padding-right:10%;">{{row.matnr}}</text>
									<text style="padding-right:10%;">{{row.maktx}}</text>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="pass">
					<div class="passinfo">
						<div class="passnum">
							<div class="numsg">派工数量：2400</div>
							<div class="numsg">完工数量：0</div>
							<!-- <div class="numsg">不合格数量：0.00%</div> -->
							<div class="numsg" >合格率：100%</div>
						</div>

					</div>
					<div class="foot">
						<div class="footmsg" v-for="(row,index) in codeList" :key="index">
							<!-- hover-class="bg-click selectIndex==index?'bg-click':''" -->
							<div :class="{footnum:true,'bg-click':selectIndex==index}" @click="changeNum(row,index)">
								{{row.defectName}}</div>
						</div>
						
						<div class="footput">
							<div class="putbox">
								<div class="putmsg">数量：</div>
								<input class="inputbox" placeholder="请输入数量" v-model="anzwertg" @blur="updateNum()"/>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="but">
				<div class="butleft">
					<button type="warn">刷新</button>
				</div>
				<div class="butright">
					<button type="warn" @click="sumbitHanlder">提交确认</button>
				</div>
			</div>

		</div>
	</form>
</template>

<script>
	export default {
		data() {
			return {
				anzwertg:'',
				realname:'',
				username:'',
				aList: [],
				selectIndex:-1,
				leftIndex:-1,
				sumCode:0,
				pastrterm: new Date().toISOString().slice(0, 10),
				codeList:[
					
				],
				aufnr:'',
				matnr:'',
				color:'',
				userUrl:'/sys/user/queryById',
				orderUrl:'/dcloud/productionAfpo/productionAfpo/list',
				codeListUrl:'/dcloud/qm.defectCode/qmDefectCode/list',
				add:'/dcloud/qualityCheck/qualityCheck/addpqc',
				bgColor: 'bg-green',
				app_height: 0
			}
		},
		onLoad() {
			this.getUser()
			this.getOrder()
			this.getDefectCode()
		},
		methods: {
			changeNum(row,index) {
				this.selectIndex = index;
				this.anzwertg = row.anzwertg;
			},
			changeAufnr(e) {
				this.aufnr = e.aufnr
				this.matnr = e.matnr
				this.color = e.color
			},
			sumbitHanlder(){
				if(this.aufnr==''){
					this.$tip.alert('请选择指令单');
					return
				}
				this.calSum();
				let param = {
					'aufnr':this.aufnr,
					'werk': "1000",
					'art': "0302",
					'inspectionOperationList':this.codeList,
					'lmenge02':this.sumCode,
					'pastrterm':this.pastrterm,
					'matnr':this.matnr,
					'color':this.color
				}
				this.$http.post(this.add,param).then(res=>{
					if(res.data.success){
						this.$tip.success('提交成功')
						this.selectIndex = -1,
						this.leftIndex = -1,
						this.sumCode = 0;
						this.codeList.forEach(v=>{
							v.anzwertg = 1;
						});
					}else{
						this.$tip.alert('操作失败');
					}
				})
			},
			calSum(){
				//sumCode
				this.sumCode = 0;
				this.codeList.forEach(v=>{
					this.sumCode = parseInt(this.sumCode) + parseInt(v.anzwertg);
				});
			},
			updateNum(){
				if(this.selectIndex>=0){
					this.codeList[this.selectIndex].anzwertg = this.anzwertg;
				}
				
			},
			getUser(){
				let id =uni.getStorageSync('login_user_info').id
				this.$http.get(this.userUrl,{params:{id:id}}).then(res=> {
					if (res.data.success) {
						let result = res.data.result
						this.realname = result.realname
						this.username= result.username
					}
				}).catch(e=>{
					console.log("请求错误",e)
				})
			},
			getOrder(){
				this.$http.get(this.orderUrl,{
					params: {
						"pageSize":100,
					}
				}).then(res=> {
					if (res.data.success) {
						this.aList = res.data.result.records
					}
				}).catch(e=>{
					console.log("请求错误",e)
				})
			},
			getDefectCode(){
				this.$http.get(this.codeListUrl,{
					params: {
						"pageSize":9,
					}
				}).then(res=> {
					if (res.data.success) {
						var record = res.data.result.records;
						record.forEach(v=>{
							v.anzwertg = 1;
							v.ktsch = v.defectCode
						});
					    this.codeList = record;
					}
				}).catch(e=>{
					console.log("请求错误",e);
				})
			},
		}
	}
</script>

<style>
	.body {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 1%;
	}

	.title {
		display: flex;
		flex-direction: row;
		background-color: rgb(111, 160, 183);
		width: 100%;

	}

	.tit-font {
		text-align: center;
		flex: 1;
		font-size: 10rpx;
		margin: 1% 0;
	}

	.tit-img {
		width: 30rpx;
		height: 20rpx;
		margin: 0 20% 25% 0;
	}

	.top {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.top-left {
		width: 30%;
		display: flex;
		flex-direction: column;

	}

	.toplmsg {
		margin: 2% 5% 2% 0;
		background-color: rgb(87, 147, 223);
		height: 45rpx;
		display: flex;
		flex-direction: column;
		color: aliceblue;
	}

	.xiangxi {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 7% 1% 0 0;
		width: 100%;
		height: 20rpx;
	}

	.infomsg {
		width: 20%;
		font-size: 10rpx;
	}

	.secinfo {
		height: 20rpx;
		font-size: 12rpx;
		text-align: center;
	}

	.secmsg {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin: 0.5% 3% 0;
		width: 100%;
		height: 20rpx;
		font-size: 10rpx;
	}

	.matnr {
		display: flex;
		margin: 2% 5% 2% 0;
		background-color: rgb(87, 147, 223);
		flex-direction: column;
		padding: 1% 0;
		height: 285rpx;//需要给定固定高度
		overflow: scroll;
	}

	.matinfo {
		display: flex;
		background-color: white;
		flex-direction: column;
	}

	.fmatf {
		text-align: left;
		width: 70%;
		font-size: 10rpx;
		height: 25rpx;
		padding: 5% 0 0 20%
	}

	.secmatf {
/* 		display: flex;
		flex-direction: row; */
		font-size: 10rpx;
		height: 25rpx;
		margin: 0 0 0 20%;
	}

	.pass {
		width: 70%;
		display: flex;
		flex-direction: column;
	}

	.passinfo {
		margin: 0.8% 0 0.8% 5%;
		background-color: rgb(87, 147, 223);
		height: 45rpx;
		display: flex;
		flex-direction: row;
	}

	.passnum {
		color: aliceblue;
		display: flex;
		flex-direction: row;
		margin: 3% 3%;
		width: 100%
	}

	.numsg {
		width: 40%;
		font-size: 10rpx;
	}

	.foot {
		margin: 0.8% 0 0.8% 5%;
		background-color: rgb(87, 147, 223);
		/* display: flex;
		flex-direction: column; */
		padding: 3% 0;
		height: 285rpx;
	}

	.footmsg {
		width: 100%;
	}

	.footnum {
		background-color: white;
		width: 25%;
		height: 35rpx;
		font-size: 12rpx;
		text-align: center;
		line-height: 35rpx;
		margin-left:5%;
		margin-top: 2.5%;
		margin-bottom: 5.5%;
		float: left;
	}

	.footput {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		background-color: white;
	}

	.putbox {
		display: flex;
		flex-direction: row;
		margin: 0 0 0 20%;
		width: 60%;
	}

	.putmsg {
		width: 40%;
		font-size: 10rpx;
		margin: 4.5% 0 3% 20%;
	}

	.inputbox {
		width: 60%;
		font-size: 10rpx;
		margin: 5.5% 25% 0 0;
		border: 1rpx solid darkgray;
		text-align: center;
	}

	.but {
		display: flex;
		width: 100%;
		flex-direction: row;
	}

	.butleft {
		width: 30%;
		margin: 0.8% 5% 2% 0;
		height: 50rpx
	}

	.butleft button {
		height: 100%;
		line-height: 50rpx;
		background-color: rgb(211, 48, 35)
	}

	.butright {
		width: 70%;
		margin: 0.8% 0 0.8% 0;
		height: 50rpx
	}

	.butright button {
		height: 100%;
		line-height: 50rpx;
		background-color: rgb(211, 48, 35)
	}
	
	.bg-click {
		color: white;
		background-color: rgb(226, 140, 52) !important;
		animation: 1s;
	}
	.bg-click:active:after {
	 transform: scale(0);
	 opacity: 1;
	 transition: 0s;
	}
</style>
